<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>权限管理</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/amazeui.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/app.css">
<link
	href="${pageContext.request.contextPath}/style/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/style/layui/css/layui.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/style/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/style/js/amazeui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
<style type="text/css">
label {
	font-family: "Times New Roman", Times, serif;
	font-size: 15px;
	color: #000000;
}

th {
	text-align: center;
}
</style>
</head>

<body>
	<div
		style="width:100%;background-color:#F8F8FF;height:100%;position: absolute;top:1px;left:1px">
		<div id="operatediv"
			style="height:7%;width:100%;position: absolute;top:10px;left:15px">
			<button id="refrsh" class="am-btn am-btn-primary am-btn-xs" onclick="history.go(0)"
				type="button">
				<i class="glyphicon glyphicon-refresh"></i>刷新
			</button>
			<button id="add" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-plus"></i>添加
			</button>
			<button id="edit" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="am-icon-pencil"></i>编辑
			</button>
			<button id="delete" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-remove"></i>删除
			</button>
			<button id="role" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-remove"></i>权限管理
			</button>

		</div>
		<div id="tablediv"
			style="height:70%;width:100%;position: absolute;top:40px;left:15px">
			<table class="layui-table" id="" border="1px">
				<thead>
				<colgroup>
					<col width='5px'>
					<col width='50px'>
					<col width='200px'>
					<col width='200px'>
				</colgroup>
				<tr>
					<th><input id='allid' type='checkbox'></th>
					<th>编号</th>
					<th>角色名</th>
					<th>状态</th>
				</tr>
				<tbody id="roletable">
				
				
				</tbody>
				


			</table>
			<div id="page" style="text-align:center"></div>
		</div>


	</div>

</body>
<script type="text/javascript">
	$(document).ready(function() {

		//ajax请求后台数据
		getlist();
		//点击搜索时 搜索数据
		$("#search").click(function() {
			getlist();
			currentPageAllAppoint = 1; //当点击搜索的时候，应该回到第一页
			toPage();//然后进行分页的初始化

		})
		toPage();
	});

	//分页参数设置 这些全局变量关系到分页的功能
	var startAllAppoint = 0;//开始页数
	var limitAllAppoint = 8;//每页显示数据条数
	var currentPageAllAppoint = 1;//当前页数
	var dataLength = 0;//数据总条数
	//ajax请求后台数据
	function getlist() {
		$.ajax({
			type : "post",
			async : false,
			dataType : "json",
			url : "${pageContext.request.contextPath}/role/rolelist",
			data : {
				start : startAllAppoint,
				limit : limitAllAppoint
			},
			success : function(data, status) {
				gettable(data.root);
				startAllAppoint = data.currentResult;//当前页数(后台返回)
				dataLength = data.total;//数据总条数
			}
		});

	}
	function gettable(data) {
		var s = "";
		$
				.each(
						data,
						function(v, o) {
							//alert(JSON.stringify(o));
							s += "<tr><td><input type='checkbox' value="+o.roleId +" id='box' name='mycheckbox'></td><td>"
									+ o.roleId + "</td>";
							s += "<td>" + o.roleName + "</td>";
							if (o.roleState == 1) {
								s += "<td>正常</td>";
							} else {
								s += "<td>关闭</td>";
							}
						});
		if (data.length > 0) {
			$("#page").show();
			$("#roletable").html(s);
		} else {
			$("#page").hide();
			$("#roletable")
					.html(
							"<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
		}

	}

	function toPage() {

		layui
				.use(
						[ 'form', 'laypage', 'layedit', 'layer', 'laydate' ],
						function() {
							var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate, laypage = layui.laypage;

							var nums = 10;
							//调用分页
							laypage.render({
								elem : 'page',
								count : dataLength //这个是后台返回的数据的总条数
								,
								limit : limitAllAppoint //每页显示的数据的条数,layui会根据count，limit进行分页的计算
								,
								curr : currentPageAllAppoint,
								skip : true,
								jump : function(obj, first) {

									currentPageAllAppoint = obj.curr;
									startAllAppoint = (obj.curr - 1)
											* obj.limit;
									//document.getElementById('biuuu_city_list').innerHTML = render(obj, obj.curr);
									if (!first) { //一定要加此判断，否则初始时会无限刷新
										getlist();//一定要把翻页的ajax请求放到这里，不然会请求两次。
										//location.href = '?page='+obj.curr;
									}
								}
							});

						});
	};

	var isCheckAll = false;
	$("#allid").click(function() {
		if (!isCheckAll) {
			$("input[type='checkbox']").each(function() {
				$("input[type='checkbox']").prop("checked", true);

			});
			isCheckAll = true;
		} else {
			$("input[type='checkbox']").each(function() {
				$("input[type='checkbox']").prop("checked", false);
				isCheckAll = false;
			});
		}
	});

	$("input[type='checkbox']").click(function() {
		if ($(this).is(':checked')) {
		} else {
			isCheckAll = false;
			$("#allid").prop("checked", false);

		}
	});
</script>

<script type="text/javascript">
	layui.use([ 'layer', 'table', 'laypage' ], function() {
		var layer = layui.layer //获得layer模块
		, table = layui.table, page = layui.laypage; //获得laypage模块

		//使用模块
		$("#add").click(function() {

			layer.open({
				type : 2,
				title : '添加角色',
				content : [ 'add', 'no' ],
				area : [ '400px', '400px' ],
				end:function(){
					location.reload();
				}
			});
		});
		
		
		$("#edit").click(function(){
			var len=0;
			var id=0;
			$.each($('input:checkbox:checked'),function(){
				// alert($('input[type=checkbox]:checked').length+","+$(this).val());
				len=$('input[type=checkbox]:checked').length;
				id=$(this).val();
			});
			 if(len>1||len<1){
				 layer.open({
					 title:'编辑角色',
					 content:'编辑角色数出错'
				 });
			 }else{
				 layer.open({
						type : 2,
						title : '角色编辑',
						content : [ 'edit?id='+id, 'no' ],
						area : [ '500px', '300px' ],
						end:function(){
							location.reload();
						}

					});
			 }
		});
		
		
		$("#delete").click(function(){
			var idvalue=new Array();
			$.each($('input:checkbox:checked'),function(){
				// alert($('input[type=checkbox]:checked').length+","+$(this).val());
				idvalue.push($(this).val()); 
			});
			if(idvalue.length==0){
				layer.open({
					title:'删除用户',
					content:'未选择用户！',
				});
			}else{
				layer.open({
					title:'删除用户',
					content:'确认删除用户？',
					btn:['确认','取消'],
					yes:function(index,layero){
						$.ajax({
							type:"post",
							url:"${pageContext.request.contextPath}/role/delete",
							data:{ids:idvalue},
							dataType:"text",
							traditional: true,//这里设为true就可以了
							success:function(res){
								if(res=="success"){
									layer.alert('用户删除成功', {
										skin : 'layui-layer-molv' //样式类名
										,
										closeBtn : 0,
										end:function(){
											location.reload();
										}
									}, function() {
										layer.closeAll();
									});
								}else{
									layer.alert('用户删除失败', {
										skin : 'layui-layer-molv' //样式类名
										,
										closeBtn : 0
									}, function() {
										layer.closeAll();
									});
								}
							},
					
						});
					}
				});
			}
		});
		
		$("#role").click(function(){
			var len=0;
			var id=0;
			$.each($('input:checkbox:checked'),function(){
				// alert($('input[type=checkbox]:checked').length+","+$(this).val());
				len=$('input[type=checkbox]:checked').length;
				id=$(this).val();
			});
			 if(len>1||len<1){
				 layer.open({
					 title:'设置角色权限',
					 content:'请选择一个权限'
				 });
			 }else{
				 layer.open({
					 	type : 2,
						title : '权限设置',
						content : 'roleedit?id='+id,
						scrollbar:true,
						offset:'10px',
						zidex:10000000000000,
						area :['400','400'],
						btnAlign: 'c',
						
						end:function(){
							location.reload();
						}
				 });
			 }
		});
		

	});
</script>

</html>
